<template>
  <el-card class="box-card">
    <div class="mgmt-user">
      <div class="operate">
        <el-button type="primary" @click="openModel(1)">新建</el-button>
      </div>
      <el-table :data="tableData" :border="true" style="width: 100%" default-expand-all row-key="id">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="name" label="名称" width="200" />
        <el-table-column prop="path" label="path地址" />
        <el-table-column prop="component" label="文件地址" />
        <el-table-column label="操作" #default="scope" width="200">
          <el-button size="small" type="danger" plain @click="delMenu(scope.row)">删除</el-button>
          <el-button size="small" type="primary" plain @click="openModel(2, scope.row)" v-show="scope.row.pid == 0"
            >添加子类</el-button
          >
        </el-table-column>
      </el-table>
    </div>
  </el-card>
  <el-dialog v-model="dialogVisible" :title="modelTitle" width="30%" :close-on-click-modal="false">
    <myForm
      :formData="data.formData"
      :formConfig="formConfig"
      :formColumn="formColumn"
      :formRules="rules"
      ref="FF"
      class="form"
    ></myForm>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submit()">确定</el-button>
      </span>
    </template>
  </el-dialog>
  <Model
    type="delete"
    title="是否确认删除？此操作不可撤回"
    v-model="modelValue2"
    @onClose="modelValue2 = false"
    @onOk="delOk"
  ></Model>
</template>

<script setup>
import { onMounted, ref, reactive, computed } from 'vue'
import { getMenuApi, addMenuApi, delMenuApi } from '@/api/menu' //api/后面不能大写Mgmt
import { ElMessage, ElMessageBox } from 'element-plus'
import { listToTree } from '@/utils/index.js'
import myForm from '@/components/UnForm/index.vue'
//1 获取数据
const tableData = ref([])
const initData = async () => {
  const res = await getMenuApi()
  if (res.code === 200) {
    let aa = listToTree(res.data.reverse())
    tableData.value = aa
  }
}
// 添加数据
const data = reactive({ formData: {} })
const formConfig = reactive({ labelWidth: '120px' })
const formColumn = reactive([
  {
    label: '名称',
    type: 1,
    fild: 'name',
    rule: [{ required: true, message: '请输入名称', trigger: 'blur' }],
    disabled: false,
    width: '100%'
  },
  {
    label: '类型',
    type: 2,
    fild: 'type',
    rule: [{ required: true, message: '请输入类型', trigger: 'blur' }],
    disabled: true,
    option: [
      { label: '菜单', value: '菜单' },
      { label: '目录', value: '目录' }
    ],
    width: '100%'
  },
  {
    label: '地址',
    type: 1,
    fild: 'path',
    rule: [{ required: true, message: '请输入地址', trigger: 'blur' }],
    width: '100%'
  },
  {
    label: '路径',
    type: 1,
    fild: 'component',
    rule: [{ required: true, message: '请输入路径', trigger: 'blur' }],
    tip: '如./views/modules/test1/index.vue',
    width: '100%'
  }
])
//添加表单验证
const rules = computed(() => {
  const obj = reactive({})
  formColumn.forEach((item) => {
    if (item.rule) {
      const key = item.fild
      const rule = item.rule
      obj[key] = rule
    }
  })
  return obj
})
const FF = ref(null)

const dialogVisible = ref(false)
const modelTitle = ref('')
const isType = ref(false)
const currentId = ref(null)
const openModel = (type, value) => {
  dialogVisible.value = true
  if (type === 1) {
    isType.value = false
    modelTitle.value = '添加目录'
    data.formData.type = '目录'
    data.formData.component = 'Layout'
    formColumn[3].disabled = true
  }
  if (type === 2) {
    isType.value = true
    currentId.value = value.id
    modelTitle.value = '添加菜单'
    data.formData.type = '菜单'
    data.formData.component = ''
    formColumn[3].disabled = false
  }
}
const submit = async () => {
  const res = await FF.value.checkForm() //表单验证
  if (res) {
    if (isType.value) {
      addMenu()
    } else {
      //添加目录
      addCatal()
    }
  }
}
//添加菜单
const addMenu = () => {
  const param = { pid: currentId.value }
  let forms = { ...data.formData, ...param }
  addMenuApi(forms).then((res) => {
    if (res.code == 200) {
      dialogVisible.value = false
      ElMessage({ message: '添加成功', type: 'success' })
      initData()
    } else {
      ElMessage.error(res.msg)
    }
  })
}
//t添加目录 pid:0
const addCatal = () => {
  const param = { pid: '0' }
  let forms = { ...data.formData, ...param }
  addMenuApi(forms).then((res) => {
    if (res.code == 200) {
      dialogVisible.value = false
      ElMessage({ message: '添加成功', type: 'success' })
      initData()
    } else {
      ElMessage.error(res.msg)
    }
  })
}
// 3.删除菜单
const modelValue2 = ref(false)
const delMenuId = ref(null)
const delMenu = async (val) => {
  if (val.type === '目录' && val.children.length > 0) {
    ElMessage.error('请先删除子目录')
    return
  } else {
    modelValue2.value = true
    delMenuId.value = val.id
  }
}
// 确认删除
const delOk = async () => {
  const res = await delMenuApi({ id: delMenuId.value })
  if (res.code === 200) {
    ElMessage({ message: '删除成功', type: 'success' })
    modelValue2.value = false
    initData()
  }
}

onMounted(() => {
  initData()
})
</script>
<style lang="scss" scoped>
.mgmt-user {
  .operate {
    margin: 20px 0;
    display: flex;

    .input {
      width: 250px;
      margin-right: 20px;
    }
  }
}

.userForm {
  .el-select {
    width: 100%;
  }
}
</style>
